<template>
  <div class="layout-logo">
    <!-- 如果menuCollapse菜单栏未折叠的情况显示 -->
    <img
      v-if="!config.layout.menuCollapse"
      class="logo-img"
      src="@/assets/logo.png"
      alt="LOGO"
    />
    <!-- logo右边文字 如果menuCollapse菜单栏未折叠的情况显示-->
    <div
      v-if="!config.layout.menuCollapse"
      :style="{ color: config.getColorVal('menuActiveColor') }"
      class="website-name"
    >
      {{ siteConfig.site_name }}
    </div>
    <!-- 最右边的menu菜单图标 -->
    <div class="fold" :class="config.layout.menuCollapse ? 'unfold' : ''">
      <!-- <Menu @click="onMenuCollapse" style="width: 1.3em; height: 1.3em" /> -->
      <Icon
        v-if="config.layout.layoutMode != 'Streamline'"
        @click="onMenuCollapse"
        :name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
        :class="config.layout.menuCollapse ? 'unfold' : ''"
        :color="config.getColorVal('menuActiveColor')"
        size="18"
        class="fold"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { useSiteConfig } from "@/store/siteConfig"; //后台站点基本信息仓库
import { useNavTabs } from "@/store/navTabs"; //后台路由相关仓库
import { Session } from "@/utils/storage"; //对于localStorage与sessionStorage的set/get/remove/clear的方法
import { BEFORE_RESIZE_LAYOUT } from "@/store/constant/cacheKey"; //localStorage与sessionStorage存储的数据key值
import { closeShade } from "@/utils/pageShade";

const config = useConfig();
const navTabs = useNavTabs();
const siteConfig = useSiteConfig();

//控制菜单是否折叠
const onMenuCollapse = () => {
  //如果不是小屏布局&&且菜单不折叠的情况下
  if (config.layout.shrink && !config.layout.menuCollapse) {
    //ba-layout-shade为全局遮罩
    //querySelector获取class为ba-layout-shade的dom 将其移除
    closeShade();
  }
  //后台自适应布局配置 取反 是否折叠菜单
  config.setLayout("menuCollapse", !config.layout.menuCollapse);

  //将当前布局样式存储至sessionStorage中
  Session.set(BEFORE_RESIZE_LAYOUT, {
    layoutMode: config.layout.layoutMode,
    menuCollapse: config.layout.menuCollapse,
  });
};
</script>
<style lang="scss" scoped>
.layout-logo {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
  background: v-bind(
    'config.layout.layoutMode != "Streamline" ?  config.getColorVal("menuTopBarBackground"):"transparent"'
  );
}
.logo-img {
  width: 40%;
}
.website-name {
  padding-left: 2px;
  // word-spacing: 20px;英文字体间距
  letter-spacing: 3px; //中文字体间距
  font-size: var(--el-font-size-extra-medium);
  font-weight: 600;
}
.fold {
  margin-left: auto;
}
.unfold {
  margin: 0 auto;
}
</style>
